<template>
    <div id="reports">
      <div class="dir">
           <DirCatalog></DirCatalog>
      </div>

    <div class="content">
    </div>
    </div>
</template>
<script>
    import DirCatalog from "./DirCatalog";
    export default {
        name: "TheResearchReport",
        components:{
          DirCatalog
       }
    }
</script>

<style scoped>
  #reports{
    position: absolute;
    left: 15.5%;
    /*height: 87%;*/
    top: 9.5%;
    bottom: 1.5%;
    width: 83.5%;
    /*background-color: #ffffff;*/
    border-radius: 8px;
  }
  .dir{
    position: absolute;
    width: 20%;
    height:100%;
    background-color: white;
    border-left:2px #E9EEF3 solid ;
    overflow: auto;
    border-radius: 8px;
  }
  .content{
    left:20.5%;
    position: absolute;
    height: 100%;
    width:79.5%;
    overflow: auto;
    background-color: #ffffff;
    border-radius: 8px;
  }

</style>
